<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="85px">
        <el-form-item label="园所名称：" prop="title">
          <el-input v-model="queryParams.title" @input="handleInput" placeholder="请输入园所名称" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="学期" prop="semId">
          <el-select v-model="queryParams.semId" filterable clearable placeholder="请选择学期">
            <el-option
              v-for="item in semsterList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              size="small">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="班级" prop="classId">
           <el-select v-model="queryParams.classId" clearable filterable placeholder="请选择班级">
             <el-option
               v-for="item in classList"
               :key="item.id"
               :label="item.title"
               :value="item.id"
               size="small">
             </el-option>
           </el-select>
         </el-form-item>
         <!-- <el-form-item label="课程" prop="courseId">
          <el-select v-model="queryParams.courseId" placeholder="请输入课程" clearable filterable>
            <el-option
              v-for="dict in courseList"
              :key="dict.id"
              :label="dict.title"
              :value="dict.id"
            />
          </el-select>
         </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="teachPlanList" >
        <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
        <el-table-column label="园所名称" align="center" prop="schoolName" />
        <el-table-column label="学期" align="center" prop="semName" />
        <el-table-column label="班级" align="center" prop="className" />
        <el-table-column label="课程" align="center" prop="courseName" />
        <el-table-column label="教师工号" align="center" prop="code" />
        <el-table-column label="教师姓名" align="center" prop="name" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleDetail(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 查看教学计划详情 -->
      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-descriptions class="margin-top" title="教学计划详情" :column="1">
                <el-descriptions-item label="学生分析">{{teachPlandetailList.student}}</el-descriptions-item>
                <el-descriptions-item label="教学目标">{{teachPlandetailList.target}}</el-descriptions-item>
                <el-descriptions-item label="教学措施">{{teachPlandetailList.measure}}</el-descriptions-item>
            </el-descriptions>
            <div class="Img">
                <span>教学计划图片:</span>  <img class="devImg" fit="fill" v-for="(item,index) in this.files" :key="index" :src="item" />
            </div>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { listTeachPlan, getTeachPlan, getTeachPlanDetail, delTeachPlan, addTeachPlan, updateTeachPlan, exportTeachPlan } from "@/api/teach/teachPlan";
  import { getToken } from "@/utils/auth";
  import { selectSpecialty} from "@/api/base/specialty";
  import { selectSemster} from "@/api/base/semster";
  import { selectClazz } from "@/api/base/clazz";  //班级接口
  import { selectCourse} from "@/api/base/course";  // 课程接口
  import { selectTeacher} from "@/api/base/teacher";
  import { teachPlanList,teachPlandetailsList } from "@/api/qu/teachPlan";
  export default {
    name: "TeachPlan",
    data() {
      return {
        //最大课时
        periods: 48,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 教学计划表格数据
        teachPlanList: [],
        // 学期数据
        semsterList: [],
        //起始年
        yearList:[],
        // 专业表格数据
        specialtyList: [],
        // 班级表格数据
        classList: [],
        // 教师表格数据
        teacherList: [],
        // 课程数据
        courseList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          semId: null,
          specId: null,
          courseId: null,
          classId: null,
          teacherId: null,
        },
        teachPlandetailList:{},
        files:[]
      };
    },
    created() {
      this.getList();
      this.getConfigKey("teach.period.max").then(response => {
        this.periods = parseInt(response.msg);
      });
      selectSpecialty({'status':1}).then(response => {
        this.specialtyList = response.rows;
      });
      selectSemster({'status':1}).then(response => {
        this.semsterList = response.rows;
      });
      selectCourse().then(response => {
          this.courseList = response.rows;
          this.total = response.total;
        });
      selectTeacher({'status':1}).then(response => {
          this.teacherList = response.rows;
          this.total = response.total;
        });
      selectClazz().then(response => {
          this.classList = response.rows;
          this.total = response.total;
        });
    },
    methods: {
      /** 查询教学计划列表 */
      async getList() {
        this.loading = true;
        try {
            const obj = {
                classId:this.queryParams.classId,
                schoolName:this.queryParams.title,
                semId:this.queryParams.semId,
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
            }
             const data =  await teachPlanList(obj);
             this.teachPlanList = data.rows;
             this.total = data.total;
             this.loading = false;
        } catch (error) {
            console.log(error);
        }
      },
       // 序号
       customeIndex(index){
           return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
        },
        handleInput(val){
          let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g; // 特殊字符正则
          let regkg = /[ ]/g;// 空格正则
          this.queryParams.title = val.replace(regtszf, '').replace(regkg, '');
         },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          semId: null,
          specId: null,
          courseId: null,
          classId: null,
          teacherId: null,
          book: null,
          student: null,
          target: null,
          measure: null,
          periods:[]
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleDetail(val){
          this.open=true;
          this.getTeachPlandetailsList(val)
      },
      async getTeachPlandetailsList( val){
         try {
          const {data} =  await teachPlandetailsList(val.id);
          this.teachPlandetailList =data;
              this.files  = this.teachPlandetailList.file.split(',')
            //   console.log(this.teachPlandetailList,this.files);
         } catch (error) {
            console.log(error);
         }
      },
      submitForm(){
        this.open=false;
        this.this.teachPlandetailList={};
        this.files=[]
      },
      cancel(){
        this.open=false;
        this.teachPlandetailList={};
        this.files=[]
      }
    }
  };
  </script>
  <style lang="scss" scoped>
    .Img{
        display: flex;
      align-items: center;
        .devImg {
              margin-left: 5px;
              width: 100px;
              height: 100px;
        }
    }
  </style>
  